<template>
  <input
    type="checkbox"
    :class="cn(toggleVariants({ color, size }), $attrs.class)"
    :checked="modelValue"
    @change="modelValue = ($event.target as HTMLInputElement).checked"
  />
</template>

<script setup lang="ts">
import { cva } from "class-variance-authority";
import { cn } from "../utils";
import type { Size, Color } from "../ui/types";

interface Props {
  color?: Color;
  size?: Size;
}

const toggleVariants = cva("toggle", {
  variants: {
    color: {
      primary: "toggle-primary",
      secondary: "toggle-secondary",
      accent: "toggle-accent",
      neutral: "toggle-neutral",
      info: "toggle-info",
      success: "toggle-success",
      warning: "toggle-warning",
      error: "toggle-error",
    },
    size: {
      xs: "toggle-xs",
      sm: "toggle-sm",
      md: "toggle-md",
      lg: "toggle-lg",
      xl: "toggle-xl",
    },
  },
  defaultVariants: {},
});

defineProps<Props>();
const modelValue = defineModel<boolean>();
</script>
